import React, { Component } from 'react';
import './News_list.css';
import {Button, Input, Radio} from 'antd';

const { TextArea } = Input;

export default class Create_port extends Component{
	constructor(props){
    super(props);
    this.state = {
      choose_num: this.props.choose,
      radioValue: 1
    }
  }
  onChangeNum(e){
    this.setState({
      choose_num: e
    })
  }
  onChangeNumToo(){
    this.setState({
      choose_num: this.props.choose
    })
  }
  onChangeBody(){
    this.props.onChange(this.state.choose_num)
  } 

  handleRadio = e => {
    this.setState({
      radioValue: e.target.value,
    });
  }
	render(){
		return(
			<div id="news_list">
        <div className="col-md-12 col-sm-12">
          <h2 >新建接口</h2>
          <h4 >您可以创建新的REST访问接口。</h4>
          <Button type = 'primary' className="create_news" onMouseOver={() => {this.onChangeNum(9)}} onMouseOut={() => {this.onChangeNumToo()}} onClick={() => {this.onChangeBody()}}>查看接口列表</Button> 
          <div style = {{marginTop: 10, textAlign: 'center'}}>
            <p><label>接口地址:</label><Input style = {{width: '400px'}} /></p>
            <p><label>方法类型:</label>
              <Radio.Group onChange={this.handleRadio} value={this.state.radioValue}>
                <Radio value={1}>GET</Radio>
                <Radio value={2}>POST</Radio>
                <Radio value={3}>PUT</Radio>
                <Radio value={4}>DELETE</Radio>
              </Radio.Group>
            </p>
            <p><label style = {{verticalAlign: 'top'}}>接口描述:</label><TextArea rows={4} style = {{width: '400px'}} /></p>
            <Button type = 'primary' style = {{textAlign: 'center'}}>新建接口</Button>
          </div>
          
        </div>
      </div>
		)
	}
}